import React, { memo, useState } from 'react'
import classNames from 'classnames'
import CustomContainerHeader from '@/components/custom-container-header'
import { Right1Warpper } from './style'
import LineChart from './c-cpns/line-chart/index'

const Right1 = memo(() => {

  const data = [{
    name: '未佩戴安全帽', data: [
      { value: 1, date: '11/01' },
      { value: 4, date: '11/02' },
      { value: 12, date: '11/03' },
      { value: 15, date: '11/04' },
      { value: 11, date: '11/05' },
      { value: 18, date: '11/06' },
      { value: 13, date: '11/07' },
      { value: 10, date: '11/08' },
      { value: 20, date: '11/09' },
      { value: 12, date: '11/10' },
      { value: 3, date: '11/11' },
      { value: 24, date: '11/12' },
      { value: 17, date: '11/13' },
    ]
  },
  {
    name: '物料乱堆放', data: [
      { value: 13, date: '11/01' },
      { value: 18, date: '11/02' },
      { value: 8, date: '11/03' },
      { value: 21, date: '11/04' },
      { value: 34, date: '11/05' },
      { value: 11, date: '11/06' },
      { value: 23, date: '11/07' },
      { value: 53, date: '11/08' },
      { value: 22, date: '11/09' },
      { value: 11, date: '11/10' },
      { value: 3, date: '11/11' },
      { value: 17, date: '11/12' },
      { value: 13, date: '11/13' },
    ]
  },
  {
    name: '动火作业', data: [
      { value: 21, date: '11/01' },
      { value: 11, date: '11/02' },
      { value: 23, date: '11/03' },
      { value: 34, date: '11/04' },
      { value: 76, date: '11/05' },
      { value: 22, date: '11/06' },
      { value: 12, date: '11/07' },
      { value: 53, date: '11/08' },
      { value: 20, date: '11/09' },
      { value: 12, date: '11/10' },
      { value: 19, date: '11/11' },
      { value: 10, date: '11/12' },
      { value: 16, date: '11/13' },
    ]
  }]

  const selectTabs = [
    { label: "近一周", value: 1 },
    { label: "近一月", value: 2 },
    { label: "近一年", value: 3 },
  ]

  const [activeIndex, setActiveIndex] = useState(0)
  function clickItemHandle(index, item) {
    setActiveIndex(index)
    console.log(item);
  }
  return (
    <Right1Warpper>
      <CustomContainerHeader defaultSlot={'AI预警'} clickRightHandle={e => { console.log('点击了详情页') }} />
      <div className="content-container">
        {/* <div className="tabs">
          {selectTabs?.map((item, index) => {
            return <span key={item.value} onClick={e => clickItemHandle(index, item)} className={classNames('tab-item', { active: activeIndex === index })}>{item.label}</span>
          })}
        </div> */}
        <LineChart data={data} height="280px"></LineChart>

      </div>

    </Right1Warpper>
  )
})

export default Right1